<template>
  <div>
    <section class="activity_screenInfo_box">
      <div class="picture">
        <img v-if="status==true" :src="activityPayList.topImage.url" alt="">
      </div>
      <div v-if="activityPayList.items" class="des">
        <div class="title">
          {{activityPayList.name}}
        </div>
        <div class="pay_screen">
          场次:{{activityPayList.items[0].title}}
        </div>
        <div class="cls">票种:{{activityPayList.items[0].activityTickets[0].title}}</div>
        <div class="time">
          时间:{{activityPayList.items[0].title}} {{activityPayList.items[0].st | time1}} ~ {{activityPayList.items[0].et
          | time1}}
        </div>
        <div class="price">
          <div>
            <span>单价</span>
            :{{'￥' + activityPayList.items[0].price}}
          </div>
          <div>
            已出售:{{activityPayList.items[0].numAttendees}}/{{activityPayList.items[0].maxAttendees}}
          </div>
        </div>
      </div>
    </section>
    <section v-if="activityPayList.items" class="session">
      <p>场次:</p>
      <div>{{activityPayList.items[0].title}}</div>
    </section>
    <section v-if="activityPayList.items" class="ticket">
      <p>票种:</p>
      <div>{{activityPayList.items[0].activityTickets[0].title}}</div>
    </section>
    <div class="count">
      <div>购买票数:</div>
      <ul>
        <li :class="numStatus==true?'a':'b'" @click="clickReduce"><i class="fa fa-minus"></i></li>
        <li>{{num}}</li>
        <li @click="clickAdd"><i class="fa fa-plus"></i></li>
      </ul>
    </div>
    <div class="swiper"></div>
    <footer>确认购买</footer>
  </div>
</template>

<script>
  import axios from "axios"

  export default {
    props: ["activityPayId"],
    data() {
      return {
        activityPayList: [],
        status: false,
        num: 1,
        numStatus: false
      }
    },
    mounted() {
      this.refresh()
    },
    methods: {
      refresh() {
        console.log(this.activityPayId)
        var API_Proxy = "https://bird.ioliu.cn/v1/?url=";
        axios.get(API_Proxy + "http://www.songguolife.com/api/activity/" + this.activityPayId
        )
          .then(
            (value) => {
              this.activityPayList = value.data
              console.log(this.activityPayList)
              this.status = true;
            }, (err) => {
              console.log(err);
            }
          );
      },
      clickReduce() {
        this.num--
        if (this.num <= 1) {
          this.num = 1
          this.numStatus = true
        }

      },
      clickAdd() {
        this.num++
        this.numStatus = false
      }
    }
  }
</script>

<style scoped>
  .activity_screenInfo_box {
    width: 80vw;
    height: 30vw;
    max-width: 750px;
    max-height: 306px;
    padding: 3vw 2vw 3vw 4vw;
    border-bottom: 1px solid #f4f4f4;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    min-height: 110px;
    min-width: 380px;
  }

  .picture {
    width: 24%;
    height: 95%;
    border: 1px solid red;
  }

  .picture img {
    width: 100%;
    height: 100%;
  }

  .des {
    width: 73%;
    height: 100%;
    margin-left: 20px;
  }

  .des > div {
    margin-bottom: 1.2vw;
  }

  .des {
    font-size: 1.7vw;
  }

  .des .title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 2.3vw;
  }

  .des .pay_screen,
  .des .cls,
  .des .time,
  .des .price {
    color: #888;
  }

  .des .price {
    display: flex;
    justify-content: space-between;
  }

  .session,
  .ticket {
    width: 80vw;
    height: 30vw;
    max-width: 750px;
    max-height: 215px;
    padding: 3vw 2vw 3vw 4vw;
    margin: 0 auto;
    min-height: 150px;
    min-width: 380px;
  }

  .session p,
  .ticket p {
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    color: #888;
  }

  .session div,
  .ticket div {
    width: 50%;
    line-height: 70px;
    text-align: center;
    font-size: 2vw;
    height: 70px;
    color: #fff;
    background-color: darkorange;
    border-radius: 5px;
  }

  .count {
    width: 80vw;
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 40px;
    display: flex;
    justify-content: flex-start;
  }

  .count > div {
    font-size: 17px;
    color: #888;
    padding: 0 20px;
  }

  .count > ul {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    width: 90px;
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    border: 1px solid #ccc;
    overflow: hidden;
  }

  .count > ul li:nth-child(1) {
    width: 28px;
    text-align: center;
  }

  .count > ul li:nth-child(2) {
    width: 34px;
    text-align: center;
    font-size: 17px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }

  .count > ul li:nth-child(3) {
    width: 28px;
    text-align: center;
    color: gray;
  }

  .swiper {
    width: 750px;
    margin: 0 auto;
    min-width: 380px;
    height: 65px;
    background-color: #f4f4f4;
  }

  footer {
    width: 100%;
    height: 50px;
    background-color: darkorange;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    position: fixed;
    bottom: 0;
  }

  .a {
    color: #ccc;
  }

  .b {
    color: gray;
  }

  @media (max-width: 750px) {
    .session p,
    .ticket p {
      font-size: 4vw;
    }
    .swiper {
      display: none;
    }

  }

  @media (min-width: 750px) and (max-width: 1000px) {
    .swiper {
      width: 1200px;
    }
  }
</style>
